<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in banners" >
        <img :src="item.picUrl" alt="">
      </div>
    </div>
    <div v-show="showPagination" class="swiper-pagination swiper-pagination-white"></div>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import $ from 'jquery'
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  export default {
    data () {
      return {
        userCode: LocalDAO.getUserCode(),
        mySwiper: '',
        banners: [],
        autoplay: false,
        loop: false,
        showPagination: false
      }
    },
    mounted () {
      this.getData()
      let kv = {'usercode': this.userCode}
      TDAPP.onEvent('17007','',kv)
      TDAPP.send()
    },
    methods: {
      initSwiper () {
        let vm = this
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            autoplay: vm.autoplay,
            autoplayDisableOnInteraction: false,
            loop: vm.loop,
            onClick: swiper => {
              if (swiper.clickedIndex <= 0) {
                swiper.clickedIndex += this.banners.length
              }
              window.location.href = this.banners[(swiper.clickedIndex - 1)  % this.banners.length].linkUrl
            }
          })
        })
      },
      getData () {
        let vm = this
        $.ajax({
          method: 'GET',
          url: 'https://dl.app.gtja.com/operation/config/niurenniugu/nrngBanner.json',
          dataType: 'JSONP',
          jsonpCallback: 'success',
          success: function (response) {
            vm.banners = response.kv
//            vm.banners.push(response.kv[0])
            if (vm.banners.length > 1) {
              vm.autoplay = 2000
              vm.loop = true
              vm.showPagination = true
            }
            vm.initSwiper()
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .swiper-container {
    width: 100%;
    height: 115px;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0 !important;
  }
</style>
